<template>
  <el-container>
    <el-header height="150px">
      <div style="height:20px; font-size: 15px;background-color: rgba(205,205,205,0.2)">
        <div style="float: left; margin-left: 20px">
          <div>系统模块 > 用户管理</div>
        </div>
      </div>
      <div style="height: 110px;margin-top: 10px;min-height: 60px">
        <el-form ref="selectUser" :model="selectUser"  label-width="75px">
          <el-col :span="8">
            <el-form-item label="用户名" prop="username">
              <el-input size="mini" v-model="selectUser.username"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮箱" prop="email">
              <el-input size="mini" v-model="selectUser.email"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-form-item label="是否实名" prop="isReal">
              <el-select size="mini" v-model="selectUser.isReal" placeholder="请选择">
                <el-option v-for="item in dict1" :key="item.dictCode" :label="item.dictLabel"
                           :value="item.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="创建时间" prop="createTime">
              <el-date-picker
                size="mini"
                v-model="selectUser.createTime"
                type="daterange"
                align="right"
                unlink-panels
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="2" >
            <el-button size="mini" type="primary" @click="getUserList()">确定</el-button>
          </el-col>
          <el-col :span="2">
            <el-button size="mini" @click="toRestFild('selectUser')">重置</el-button>
          </el-col>
        </el-form>
      </div>
    </el-header>
    <el-main>
      <el-table
        :data="tableData"
        height="320"
        style="width: 100%">
        <el-table-column
          label="用户名"
          align="center"
          width="100"
          prop="username">
        </el-table-column>
        <el-table-column
          label="邮箱"
          width="180"
          align="center"
          prop="email">
        </el-table-column>
        <el-table-column
          label="创建时间"
          width="180"
          align="center"
          prop="createTime">
        </el-table-column>
        <el-table-column
          label="最近登录时间"
          width="180"
          align="center"
          prop="lastLoginTime">
        </el-table-column>
        <el-table-column
          label="角色"
          width="200"
          align="center">
          <template slot-scope="scope">
            <el-tag v-for="item in scope.row.roleEntities"
                    size="mini" :key="item.id">{{ item.roleName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="是否实名制"
          width="90"
          align="center">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.isReal==='01'" trigger="hover" placement="top">
              <p>真实姓名: {{ scope.row.realUser.realName }}</p>
              <p>电话号码: {{ scope.row.realUser.moblie }}</p>
              <p>地址: {{ scope.row.realUser.address }}</p>
              <div slot="reference" class="name-wrapper">
                <span>{{ getYesOrNo(scope.row.isReal, dict1) }}</span>
              </div>
            </el-popover>
            <span v-else>{{ getYesOrNo(scope.row.isReal, dict1) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         align="center"
        >
          <template slot-scope="scope">
            <el-button @click.native.prevent="editUserRole(scope)"
                       type="text"
            >编辑角色
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
      <el-dialog
        title="编辑角色"
        :visible.sync="dialogVisible"
        width="50%">
        <el-transfer
          style="text-align: left"
          v-model="value"
          :titles="['未获取角色','拥有角色']"
          :props="{
      key: 'id',
      label: 'roleName'
    }"
          :data="roleData">
        </el-transfer>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editRoleOk()">确 定</el-button>
  </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "userModule",
  data() {
    return {
      selectUser: {
        username: '',
        email: '',
        createTime: '',
        isReal: '',
      },
      id : '',
      total: 128,
      pageSize: 10,
      pageNo: 1,
      dict1: [],
      dialogVisible: false,
      roleData: [],
      value: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      tableData: [],
      currentPage1: 1,
    }
  },
  mounted() {
    this.$getDict('YESORNO').then((res) => {
      this.dict1 = res
    })
    this.getUserList()
  },
  methods: {
    getUserList() {
      let data = this.selectUser
      console.log(data)
      this.$axios({
        url: '/user/getUserList',
        method: 'get',
        params: {
          username: data.username,
          email: data.email,
          isReal: data.isReal,
          beginTime: data.createTime[0],
          endTime: data.createTime[1],
          pageNo: this.pageNo,
          pageSize: this.pageSize
        },
      }).then(res => {
        console.log(res)
        let data = res.data.data
        this.tableData = data.records
        this.total = data.total
        console.log(this.tableData)
      })
    },
    toRestFild(ref) {
      this.$refs[ref].resetFields()
    },
    getYesOrNo(value, list) {
      return this.$getDictLabel(value, list)
    },
    handleCurrentChange(val) {
      this.currentPage1 = val
      this.getUserList()
    },
    editUserRole(scope) {
      this.id = scope.row.id
      let roles = scope.row.roleEntities
      //判断是否已经获取roleData
      this.roleData.length === 0 && this.getRoleAll()
      this.value = []
      roles.forEach(item => {
        this.value.push(item.id)
      })
      console.log(this.value)
      this.dialogVisible = true
    },
    getRoleAll() {
      this.$axios({
        url: '/role/getAllRole',
        method: 'get',
        params:{
          roleName:'',
          roleCode:'',
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.roleData = res.data.data
          console.log(this.roleData)
        }
      })
    },
    editRoleOk(){
      let list = this.value;
      let roleStr = ''
      list.forEach(item=>{
        roleStr += item +","
      })
      roleStr = roleStr.slice(0,-1)
      this.$axios({
        url:"/user/editUserRole",
        method: "put",
        params:{
          id:this.id,
          roleStr: roleStr
        }
      }).then(res=>{
        if (res.data.code === 200){
          this.$message.success("操作成功！")
          this.getUserList()
          this.dialogVisible =false;
        }else {
          this.$message.error("操作失败！")
        }
      })
    }
  }
}
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}



.el-transfer-panel {
  width: 300px;
}

.el-transfer__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.el-button.el-button--primary {
  margin-left: 0;
}
attribute {
  text-align: left;
  display: inline-block;
}

</style>
